<template>
  <label>
    {{ label }}
    <div class="input">
      <input
        id="input"
        type="text"
        :value="props.modelValue"
        :placeholder="placeholder"
        @input="change"
        ref="input"
        :readonly="readonly"
        :style="{ backgroundColor: readonly ? '#bbb' : '#fff' }"
      />
      <slot name="button"></slot>
    </div>
  </label>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from "vue";
const emit = defineEmits(["update:modelValue"]);
const input = ref<HTMLInputElement | null>(null);
const props = withDefaults(
  defineProps<{
    modelValue: string;
    type?: string;
    placeholder?: string;
    label?: string;
    readonly?: boolean;
  }>(),
  {
    modelValue: "",
    type: "text",
    placeholder: "",
    label: "",
    readonly: false,
  }
);
const change = () => {
  emit("update:modelValue", input.value?.value);
};
</script>

<style lang="scss" scoped>
label {
  color: #ddd;
  font-size: 14px;
}
.input {
  margin: 6px 0px;
  display: flex;
  input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    height: 35px;
    border-radius: 7px;
    padding: 0 8px;
  }
}
</style>
